<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page layout - administrator backup</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style/addStudent.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style/backups.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style/alert.css') }}"
    />
    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>

  <body>
    <div class="backups">
      <div class="con">
        <div class="header">
          <div class="h-left">
            <span class="h-logo">logo</span>
            <span class="h-school">{{ school }}</span>
          </div>
          <div class="h-right">
            <input class="h-input" type="text" placeholder="search" />
            <div class="h-center">
              <p class="h">Hi, {{ user.name }}</p>
              <p class="h-1">welcome to {{ school }}, keep good work</p>
            </div>
            <p class="h-pic-c">
              <img
                src="{{ url_for('get_avatar', filename=user.avatar) }}"
                alt=""
              />
              <a href="{{ url_for('auth.login') }}">
                <img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
              </a>
            </p>
          </div>
        </div>
        <div class="l phone-hide">
          <div class="l-list no-open">
            <span class="l-circle"></span>
            management
            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
              <path
                d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
              ></path>
            </svg>
          </div>
          <div class="l-list">
            <a href="{{ url_for('manage.professor') }}">
              <span class="l-circle"></span>
              professors
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path></svg
            ></a>
          </div>
          <div class="l-list active">
            <a href="{{ url_for('manage.student') }}">
              <span class="l-circle"></span>
              student
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </a>
          </div>
          <div class="l-list">
            <a href="{{ url_for('manage.course') }}">
              <span class="l-circle"></span>
              course
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="student-lists">
          {% for student in students %}
          <div class="student-list">
            <div>
              <div class="student-left">
                <p class="h-pic-c">
                  <img
                    src="{{ url_for('get_avatar', filename=user.avatar) }}"
                    alt=""
                  />
                </p>
                <p class="student-name">{{ student.name }}</p>
                <p class="student-grade">{{ student.gender.name }}</p>
              </div>
              <div class="student-right">
                <div class="student-icons">
                  <div class="student-icon">
                    <span class="student-circle"></span>
                    <div>
                      <p class="student-title">Email</p>
                      <p class="student-num">{{ student.email }}</p>
                    </div>
                  </div>
                  <div class="student-icon">
                    <span class="student-circle"></span>
                    <div>
                      <p class="student-title">phone number</p>
                      <p class="student-num">6468-80098765</p>
                    </div>
                  </div>
                </div>
                <div class="student-course">
                  <p class="student-course-tirtle">course:</p>
                  <div class="student-course-con">
                    <p class="bg-blue">
                      <span> course1 </span>
                    </p>
                    <p class="bg-green">
                      <span> course2 </span>
                    </p>
                    <p class="bg-purple">
                      <span> course1 </span>
                    </p>
                    <p class="bg-orange">
                      <span> course2 </span>
                    </p>
                    <p class="bg-purple-2">
                      <span> course1 </span>
                    </p>
                    <p class="bg-green-2">
                      <span> course2 </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
          <div class="student-list">
            <div class="add-con" onclick="showAlerFn()">
              <img
                src="{{ url_for('static', filename='img/001.svg') }}"
                alt=""
              />
              <p>New student</p>
            </div>
          </div>
        </div>
      </div>
      <div class="alert" onclick="hideAlerFn()">
        <div class="alert-con" onclick="showAlerFn(this,event)">
          <div class="alert-con-top">
            <span class="alert-top-text"> add students </span>
            <span class="alert-close" onclick="hideAlerFn(this,event)">
              ×
            </span>
          </div>
          <div class="alert-pic">
            <p class="alert-pic-con">
              <img
                src="{{ url_for('static', filename='img/avatar001.jpg') }}"
                alt=""
              />
            </p>
            <p>Add avatar</p>
          </div>

          <form method="post">
            <div class="alert-input-con">
              <div class="alert-input-list">
                <p class="alert-input-title">name</p>
                <input
                  id="name"
                  name="name"
                  type="text"
                  placeholder="enter your name"
                  required
                />
              </div>
              <div class="alert-input-list">
                <p class="alert-input-title">email</p>
                <input
                  id="email"
                  name="email"
                  type="text"
                  placeholder="please enter the email"
                  required
                />
              </div>
              <div class="alert-input-list">
                <p class="alert-input-title">password</p>
                <input
                  id="password"
                  name="password"
                  type="password"
                  placeholder="please enter the password"
                  required
                />
              </div>
              <div class="alert-input-list">
                <p class="alert-input-title">grade</p>
                <div class="alert-select">
                  <p class="alert-select-title" onclick="showSelectFn()">
                    <span class="grade-pp">First grade</span>
                    <img
                      src="{{ url_for('static', filename='img/017.svg') }}"
                      alt=""
                    />
                  </p>
                  <div class="alert-select-lists">
                    <p class="active" onclick="selectGrade(0)">
                      <span>First grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                    <p onclick="selectGrade(1)">
                      <span>Second grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                    <p onclick="selectGrade(2)">
                      <span>Three grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                    <p onclick="selectGrade(3)">
                      <span>Four grade</span>
                      <span>
                        <img
                          src="{{ url_for('static', filename='img/018.svg') }}"
                          alt=""
                        />
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <p class="alert-submit-con">
              <input class="alert-submit" type="submit" value="submit" />
            </p>
          </form>
        </div>
      </div>
    </div>
    <script>
      function selectGrade(tag) {
        const grades = [
          "First grade",
          "Second grade",
          "Three grade",
          "Four grade",
        ];
        $(".grade-pp").text(grades[tag]);
        $(".alert-select-lists p").eq(tag).addClass("active").siblings().removeClass("active");
      }
      function showAlerFn(obj, event) {
        stopP(event);
        $(".alert").addClass("show");
        $(".alert-select-lists").removeClass("show");
      }

      function showSelectFn() {
        stopP(event);
        $(".alert-select-lists").addClass("show");
      }

      function stopP(e) {
        var evt = e || window.event;
        evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
      }

      function hideAlerFn() {
        stopP(event);
        $(".alert").removeClass("show");
      }
    </script>
  </body>
</html>
